Ext.BLANK_IMAGE_URL='../resources/images/default/s.gif';

/**
 * @class Ext.ux.TabCloseMenu
 * 工具类，实现当右击标签页标签时弹出菜单，菜单中有三个选项<br>
 * 1.关闭此标签页
 * 2.关闭其他标签页
 * 3.关闭所有标签页
 */
Ext.ux.TabCloseMenu = function(){
    var tabs, menu, ctxItem;
    /**
     * 编写标签页插件必须实现此函数
     */
    this.init = function(tp){//start init()
        tabs = tp;
        tabs.on('contextmenu', onContextMenu);
    }//end inti()
	
    /**
     * 弹出右键菜单事件函数
     */
    function onContextMenu(ts, item, e){
        if(!menu){ //第一次时创建右键内容
            menu = new Ext.menu.Menu([{
                id: tabs.id + '-close',
                text: '关闭此标签页',
                iconCls:'menuClose',
                handler : function(){
                    tabs.remove(ctxItem);
                }
            },{
                id: tabs.id + '-close-others',
                text: '关闭其他标签页',
                iconCls:'menuClose',
                handler : function(){
                    tabs.items.each(function(item){
                        if(item.closable && item != ctxItem){
                            tabs.remove(item);
                        }
                    });
                }
            },{
                id: tabs.id + '-close-all',
                text: '关闭所有标签页',
                iconCls:'menuClose',
                handler : function(){
                    tabs.items.each(function(item){
                        if(item.closable){
                            tabs.remove(item);
                        }
                    });
                }
            }]);
        }
        ctxItem = item;
        var items = menu.items;
        //检查此元件是否可以关闭，如果不能关，则关闭项变灰
        items.get(tabs.id + '-close').setDisabled(!item.closable);
        items.get(tabs.id + '-close-all').setDisabled(!item.closable);
        var disableOthers = true;
        //检查是否有其他元件，如果没有，则关闭其他项变灰
        tabs.items.each(function(){
            if(this != item && this.closable){
                disableOthers = false;
                return false;
            }
        });
        items.get(tabs.id + '-close-others').setDisabled(disableOthers);
        //在鼠标位置显示菜单
        menu.showAt(e.getPoint());
    }
};
/**
 * @class Ext.ux.mainLayout
 * 主页面的布局
 * @param config
 * treeURL			加载树节点的URL
 * topTreeURL		加载顶级节点的URL
 * topBarURL		布局顶部的URL
 * mainBarURL		布局主要内容的URL
 * tabPanel			布局主要内容的Ext.TabPanel的对象
 * leftPanel		布局左边的Ext.Panel对象
 * viewport			布局对象
 */
Ext.ux.mainLayout=function(config){
	this.config=config;
	
	this.treeURL=this.config.treeURL;
	this.topTreeURL=this.config.topTreeURL;
	this.topBarURL=this.config.topBarURL;
	this.mainTabURL=this.config.mainTabURL;
	this.tabPanel=null;
	this.leftPanel=null;
	this.viewport=null;
	
}

Ext.ux.mainLayout.prototype={
	/**
	 * 初始化函数
	 * @return {Ext.ux.mainLayout} this
	 */
	init:function(){
			/**
		 * 创建布局的主要内容为标签页布局格式的对象
		 */
		this.tabPanel=this.config.tabPanel||new Ext.TabPanel({//start Ext.TabPanel
	        region:'center',									//设置布局为那个部分
	        minTabWidth: 115,									//标签的最小宽度
	        enableTabScroll:true,								//设置是否滚动
	        deferredRender:false,								//设置每个标签页否只创建一次
	        defaults: {											//items的默认参数设置
	        	autoScroll:true,									//设置items的滚动条
	        	closable:true										//设置items的标签页是否可以关闭
	        },
	        activeTab:0,										//显示活动的标签页，即要显示出来的标签页
	        plugins: new Ext.ux.TabCloseMenu(),					//插件
	        items:[{
		        title: '主页面',										//标题
		        iconCls: 'tabs',									//标题的图片
		        closable:false,										//是否可以不必此标签页
		        html:'<iframe width=100% height=100% frameborder=0 scrolling="auto" src="'+this.mainTabURL+'"></iframe>'//标签页的内容
	        }]
	    });//end Ext.TabPanel
	    
	    /**
	     * 创建左边菜单的对象
	     */
	    this.leftPanel=this.config.leftPanel||new Ext.Panel({//start Ext.Panel
	            		region:'west',							//设置布局中的位置
	            		title:'菜单',							//设置标题
	            		layout:'accordion',						//设置布局的类型
	            		width:280,								//设置宽度
	            		split:true,								//设置此宽度是否可调
	            		useSplitTips:true,						//设置鼠标停留时是否有提示				
	            		collapsible: true,						//设置菜单右上角是否有可伸缩的按钮
	            		collapseMode:'mini',					//设置折叠模式
	            		floatable:true,
	            		defaults:{
	            			bodyStyle:'padding:0px'
	            		},
	            		layoutConfig:{
	            			titleCollapse:true,					
	            			animate:false,						
	            			activeOnTop: false					//true显示的当前页中是在容器顶部,false根据排列顺序排序，与"animate:true"不兼容
	            		}
	            	});//end Ext.Panel
	            	
	    /**
		 * 创建布局对象
		 */
		this.viewport = this.config.viewport||new Ext.Viewport({								
	            layout:'border',									//布局类型												
	            border:0,											//设置边框
	            items:[
	            	{
	            		margins:'0 0 0 0',							//设置外边距
	            		region:'north',								//设置布局区域
	            		html: '<iframe width=100% height=100% frameborder=0 scrolling="no" src='+this.topBarURL+'></iframe>',//显示内容
	            		height:82,
	            		border:false
	            	},
	            	this.leftPanel,
	            	this.tabPanel
	             ]
	        });
	    
	    this.showTabsTree();
	    
	    return this;
	},
	/**
	 * 显示树状菜单的函数
	 * @return {Ext.ux.mainLayout} this
	 */
    showTabsTree:function(){
    	var layout=this;
    	/**
	     * 单击树节点的功能
	     * 1.只有叶节点才能创建新的tab
	     * 2.如果与此节点相关的tab已经存在,则显示此tab不在创建新的tab
	     */
	    function addTab(node,e){ 
	    	e.stopEvent();										//停止所有事件
	    	var iframeSrc=node.attributes.href;					//此标签页的超连接地址
	    	/**
	    	 * 判断树节点是否为叶节点，如果为叶节点则创建新的tab
	    	 */
	    	if(node.attributes.leaf){ 							
	    		var tab=layout.tabPanel.findById(node.id);
	    		/**
	    		 * 判断是否已经有此节点的相关标签页
	    		 * yes：创建新的标签页，并显示
	    		 * no： 显示此标签页
	    		 */
	    		if(tab==null){//yes
	    			layout.tabPanel.add({
	    				id:node.id,								//以节点的id作为标签页的id		
			            title: node.attributes.text,			//以节点的text作为标签页的title
			            iconCls: 'tabs',						//设置标签页title的图片
			            html: '<iframe width=100% height=100% frameborder=0 scrolling="auto" src='+iframeSrc+'></iframe>',//标签页要显示的内容
			            closable:true							//设置是否可以关闭此标签页
			        }).show();
	    		}else{//start no			
	    			tab.show();									//显示标签页							
	    		}//end no  		
	    	}
	        return ;
	    };
    	
    	Ext.Ajax.request({										//调用Ajax发送请求到后台
			url:this.topTreeURL,									//生成一级菜单的URL
			success:function(transport){					//处理成功后返回的函数
				var oXmlDom=transport.responseText;			//获得返回信息
				/**
				 * 判断是否为空
				 * yes:弹出错误信息
				 * no：生成一级菜单
				 */
				if(oXmlDom!=''){							
					var objs=eval(oXmlDom);
					for(var i=0;i<objs.length;i++){
						layout.leftPanel.add(new Ext.ux.MenuTree({
							dataUrl:layout.treeURL,
							click:addTab,
							title:objs[i].menuName,
							iconCls:'icon_'+objs[i].menuCode,
							icon:"url(../"+objs[i].iconAddress+") no-repeat",
							//iconCls:'icon',
							rootId:objs[i].menuCode
						}));  
						
					}
					layout.leftPanel.doLayout();
				}else{
					Ext.MessageBox.alert('消息','读取菜单信息失败!');
				}
			},
			failure:function(){									//处理后台删除失败的函数
				Ext.MessageBox.alert('消息','读取菜单信息失败!');
			}
		});
		
		return this;
    }
};


Ext.onReady(function(){
	
	var treeURL='../hf/treeMenu.do?action=secondMenu';		//树节点的URL
	var topTreeURL='../hf/treeMenu.do?action=topMenu';		//树一级菜单的URL
	var topBarURL='Topbar.jsp';								//顶部URL	
	var mainTabURL='TempleteManageList.jsp';				//标签页主页面的URL
	
	var layout=new Ext.ux.mainLayout({
		treeURL:treeURL,
		topTreeURL:topTreeURL,
		topBarURL:topBarURL,
		mainTabURL:mainTabURL
	});
	
	layout.init();
   
   //当js加载完毕后删除loading页面并渐显内容
   setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 250);
})